 <template>
  <div>
    <input type="text" v-model="searchName" />
    <ul>
      <li v-for="(p, index) in Pperson" :key="index">
        {{ index }} + {{ p.name }} + {{ p.age }}
      </li>
    </ul>
    <button @click="setOrderType(1)">年龄升序</button>
    <button @click="setOrderType(2)">年龄降序</button>
    <button @click="setOrderType(0)">原本顺序</button>
  </div>
</template>
 <script>
export default {
  data() {
    return {
        searchName: "",
        person: [
          { name: "Tom", age: 18 },
          { name: "Bomb", age: 19 },
          { name: "Oliver", age: 17 },
          { name: "Alice", age: 16 },
        ],
        orderType: 0,
    };
  },
  methods: {
    setOrderType(value) {
      this.orderType = value;
    },
    des() {
    this.$destroy() 
     clearInterval(this.inter);
       console.log([]==0);
    },
  },
  mounted() {
    this.inter = setInterval(() => {
      this.show = !this.show;
    }, 500);

  },
  beforeDestroy() {
    // 死亡之前调用
   
  },
    computed: {
      Pperson() {
        const { searchName, person, orderType } = this;
        let rec = person.filter((p) => p.name.indexOf(searchName) != -1);
        if (orderType != 0) {
          rec.sort(function (p1, p2) {
            if (orderType == 2) {
              return p2.age - p1.age;
            }
            return p1.age - p2.age;
          });
        }
        return rec;
      },
    },
};
</script>
 <style lang='css'>
  #app10>p:nth-child(even) img{
    width: 50px;
    height: 100px;
    background: red;


  }

</style>